<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function()
{
//隐藏显示函数  $(selector).hide(speed,callback)，$(selector).show(speed,callback);

  /*$("button").click(function()
  {
    $(".test").hide();
  });//点击button隐藏test


  $("#p1").click(function()
  {
    $("#p2").hide(1000);//延时隐藏
  });*/ //点击p1隐藏p2


  /*$("button").click(function(){
    $("p").toggle(1000);//toggle函数用于循环隐藏和显示
  });*/


//回调函数

  /*$("button").click(function(){
    $("#src1").hide(1000,"linear",function(){
      alert("Hide() 方法已完成!");
    });
  });*/


//fade函数以及mouse函数 $(selector).fade__(speed,callback),$(selector).fadeTo(speed,opacity,callback);

 /* $("#p1").click(function()
  {
    $("#p2").fadeOut(1000);
    $("#p3").fadeTo("1000",0.5);//改变透明度
    //$("#img1").fadeTo("1000",0.8);
    $("#img1").mouseenter(function(){
				$("#img1").fadeTo(1000,0.75);
			});
			$("#img1").mouseleave(function(){
				$("#img1").fadeTo(1000,1);
			});

  });*/

//jQuery 效果- 动画 $(selector).animate({params},speed,callback);

	  $("button").click(function(){
	  $("#img1").animate({
	    left:'50px',
	    top:'150px',
	    height:'+=150px',
	    width:'+=150px'
	  });
	});


	   /* $("#img1").mouseenter(function(){
				$("#img1").animate({ height:'+=150px',
	    width:'+=150px',opacity:'0.4',right:'150px',top:'100px'},1000);//opacity:透明度
			});
		$("#img1").mouseleave(function(){
				$("#img1").animate({ height:'-=300px',
	    width:'-=300px',opacity:'0.8',right:'50px',top:'50px'},1000);
			});*/
	

});
</script>
</head>
<body>

<h2 class="test" id="p1">AWM</h2>
<p class="test" id="p2">祁醉今天做人了吗</p>
<p id=p3>这是另外一个段落。</p>
<button>点我</button>
<br><br><br>
<img src="C:\Users\14418\Pictures\timg2.jpg" id="img1" width="500" height="500">
</body>
</html>